博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
深入浅出JQuery (三) 图片预览效果
阅读量:6263 次
发布时间:2019-06-22

本文共 1975 字,大约阅读时间需要 6 分钟。

       1.在每次学习相同的内容时都会有不同的理解,就好像我们每次从同一个地方走过的感觉的不同的一样,JQuery只是JavaScript框架中的一种,在层层众生当中脱颖而出,我们来看一下使用JQuery框架的趋势图。

       2.从图中我们可以看出,使用JQuery的人越来越多,这是由于它轻松级而且功能强大的原因。

对于一种框架不仅仅要学会使用,还要学会如何写框架,可以做出框架的人要比只是使用框架的人更牛B,所以,我们要学着写框架。

       3. 同样,技术也离不开生活,当你用一种思维方式去解决问题时,一般是生活中解决问题的过程,学会把技术融入到生活中去,技术和生活相结合,可能会更好的应用技术,可以说生活思想的创新是优于技术的,举个例子来说:AJAX不知道的人就会觉的这是产生的一种新技术,其实,不是这样,它只是一种新的思想,新的方式,如果没有人提出来这样的想法,那怎么会差生这种技术的普及和应用呢,学会生活。

       4. 下面实现了一个气泡提示功能,并不是某个元素标签的“Title”属性,元素自带提示反应很慢,不能适应每一种情况,提示会跟随鼠标移动而变化,再稍微改一改就会变成,很多购物网站上那种,鼠标移动到图片上自动放大的效果。

         先看一下效果图

 

          实现代码

         CSS代码(表现)

/* CSS Document *//*设置提示DIV的样式*/#tooltip{	/*绝对定位*/	position:absolute;	border:1px solid balck;	background:#333;	color:#fff;}p{	/*无项目符号*/	list-style:none;	float:left;	display:inline;	border:1px solid #AAAAAA;}

 

         JQuery代码(行为)

// JavaScript Document$(function(){	//保存鼠标位置坐标	var x=10;	var y=20;	//注册图片的鼠标移动事件	$('a.tooltip').mouseover(function(e){		//把图片的title属性值保存起来		this.myTitle=this.title;		this.title=""		//放大后图片上的提示信息		var imgTitle=this.myTitle ? "
"+this.myTitle:""; //创建一个现实大图片的DIV var tooltip = "
品牌预览"+imgTitle+"
"; //将创建的DIV添加到窗体中去 $('body').append(tooltip); //设置显示出来的图片的位置 $('#tooltip') .css({ "top":(e.pageY+y)+"px", "left":(e.pageX+x)+"px"}) .show('fast'); //鼠标移出事件 }).mouseout(function(){ //设回title值 this.title=this.myTitle; $('#tooltip').remove(); }).mousemove(function(e){ $('#tooltip') .css({ "top":(e.pageY+y)+"px", "left":(e.pageX+x)+"px"});; }); });

 

         HTML代码(结构)

	

苹果 iPod

苹果 iPod nano

苹果 iphone

苹果 Mac

          PS:1.在想得到元素pageX,pageY坐标时,要先把元素的position设置absolute或relate,否则元素不会移动。

                  2.html()、text()、val()关系

                       我觉的应该一般是html()>text()>val()这样的关系,它们都可以既获取值又可以设置值,html()读取设置元素整体值,text()为元素文本值,val()为元素value属性值。

                  3.this指的是当前操作的DOM对象,它不能使用JQueryfangfa ,$(this)即把this由DOM转为JQuery。

 

            一个美观的用户交互界面,一般是由表现、结构、行为这三部分组成,CSS给一个固定、死板的结构化的HTML设计了美丽的外表,而JavaScript又给他们锦上添花,增加了动态效果,从而形成了动态页面。

            一个网站往往是由很多个相互联系的动态页面以及数据库服务器组成,Web程序中与用户直接交互的只是Web前台即页面。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/lilongsheng/archive/2013/03/04/3226058.html

你可能感兴趣的文章
一些通用性的haproxy调优tips
查看>>
Java中泛型的各种使用
查看>>
这些git技能够你用一年了
查看>>
Android开发学习之路--Notification之初体验
查看>>
用友ERP T6技术解析(六) 库龄分析
查看>>
uva 10401 Injured Queen Problem(dp)
查看>>
[LeetCode] Kth Smallest Element in a BST
查看>>
rxlib簡介
查看>>
PEAR安装、管理及使用
查看>>
iOS 6.1完美越狱教程
查看>>
Android Studio无法打开解决方法
查看>>
消息头字段
查看>>
ArrayList和数组间的相互转换
查看>>
微信公众平台——自定义菜单
查看>>
[转]SQL truncate 、delete与drop区别
查看>>
软件的价值
查看>>
一种用户体验-显示对话框时灰化你的主窗体
查看>>
免费超高速卡片式病人基本信息列表控件
查看>>
HDU 3336 Count the string(KMP+DP)
查看>>
WebGame 客户端 美术资源处理之PNG批量导出SWF
查看>>